<template>
    <div class="content">
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="所属栏目">
                <el-select v-model="column" placeholder="请选择">
                    <el-option-group
                    v-for="group in columnOptions"
                    :key="group.label"
                    :label="group.label">
                    <el-option
                        v-for="item in group.options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                    </el-option-group>
                </el-select>
            </el-form-item>
            <el-form-item label="标题">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="置顶视频/图片" prop="Video">
                    <audioPicUpload v-model="topContent" v-if="topContentShow"></audioPicUpload>
                </el-form-item>
            
            <el-form-item label="发布时间">
                <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
            </el-form-item>
            <el-form-item label="排序">
                <el-input type="number" v-model="form.sortNum"></el-input>
            </el-form-item>
            <el-form-item label="活动形式">
                <vue-ueditor-wrap v-model="msg" :config="myConfig"></vue-ueditor-wrap>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">立即创建</el-button>
                <el-button>取消</el-button>
            </el-form-item>
    </el-form>
    </div>
</template>
<script>
import audioPicUpload from '@/components/audioPicUpload'
export default {
    data() {
        return {
            columnOptions: [{
            label: '热门城市',
            options: [{
                value: 'Shanghai',
                label: '上海'
            }, {
                value: 'Beijing',
                label: '北京'
            }]
            }, {
            label: '城市名',
            options: [{
                value: 'Chengdu',
                label: '成都'
            }, {
                value: 'Shenzhen',
                label: '深圳'
            }, {
                value: 'Guangzhou',
                label: '广州'
            }, {
                value: 'Dalian',
                label: '大连'
            }]
            }],
            column: '',
            topContentShow:true,
            topContent:{},
            form:{},
            msg: '<h2><img src="http://img.baidu.com/hi/jx2/j_0003.gif"/>Vue + UEditor + v-model双向绑定</h2>',
            myConfig: {
                // 编辑器不自动被内容撑高
                autoHeightEnabled: false,
                // 初始容器高度
                initialFrameHeight: 500,
                // 初始容器宽度
                initialFrameWidth: '100%',
                // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
                serverUrl: 'http://35.201.165.105:8000/controller.php',
                // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
                UEDITOR_HOME_URL: '/static/UEditor/'
                }
        }
    },
    components:{
        audioPicUpload
    },
    methods: {
        onSubmit(){

        }
    },
}
</script>